$(function () {
    ajaxFirst(1);

    layui.config({
        base: '/static/style/js/'  //模块存放的目录
    }).use(['jquery','element','form','menu'], function () {
        var $ = layui.jquery,
            form = layui.form,
            menu = layui.menu;
        menu.praise();
    })
});

function ajaxFirst(currentPage){
    var jsonStr = {pageSize: 10, pageNum: currentPage};
    $.ajax({
        type: "get",
        url: "/article/getArticle",
        data: jsonStr,
        contentType: "application/json",
        dataType: "json",
        success: function(data){
            putInArticle(data.content);
            scrollTo(0,0);// 返回顶部
            putPageHelper(data, currentPage);
        }
    })
}

function putInArticle(data){
    var article = $("#article");
    article.empty();
    $.each(data, function (index, obj) {
        var center = $(
            '<div class="item-box">' +
            '<div class="item">'+
            '<h3><a href="'+ obj["articleUrl"] + '">'+ obj["title"] + '</a></h3>' +
            '<div class="whisper-title">' +
            '<i class="layui-icon layui-icon-date"></i><span class="date">' + new Date(obj["createTime"]).toLocaleString() + '</span>' +
            '</div>' +
            '<p class="text-cont">' + obj["summary"] +'</p>' +
            '<div class="img-box">' +
            '<img src="' + obj["pictureUrl"] +'" >' +
            '</div>' +
            // '<div class="op-list">' +
            // '<p class="like">' +
            // '<i class="layui-icon layui-icon-praise"></i><span>' + obj["tags"] + '</span>' +
            // '</p>' +
            // '<p class="browse">' +
            // '<i class="layui-icon"><img src="../style/img/access.png"></i><span>' + obj["traffic"] + '</span>'+
            // '</p>' +
            // '</div>' +
            '</div>' +
            '</div>');
        article.append(center);
    });
}

function putPageHelper(data, currentPage){
    var count = data.totalSize; //总记录数
    // 总页数大于页码总数
    layui.use('laypage', function () {
        var laypage = layui.laypage;
        // 执行一个laypage 实例
        laypage.render({
            elem: 'page-helper-article',
            groups: 8,// 默认的连续出现的页码
            count: count,// 数据总数
            limit: 10,// 每页展示条数
            curr: currentPage,// 起始页
            jump: function (obj, first) {// 跳转页码时调用
                if (!first){
                    currentPage = obj.curr;
                    ajaxFirst(currentPage, 0)
                }
            }
        })
    })
}

